<template>
  <div id="login">  
      
     
       <div class="box">
          <div class="box_left">
               <img src="@/assets/images/login_new_bg.png" class="imgbg"  />
               <img src="@/assets/images/login_line.png" style="height:100%;margin-left:50px;"  />
          </div>
          <div class="box_right">
              <img src="@/assets/images/login_line1.png" style="height:100%;position: absolute;right:310px;z-index: 1;"  />
               <img src="@/assets/images/login_line2.png" style="height:45%;position: absolute;left: 20px;z-index: 1;top:0px;"  />
              <div class="con1">
                  
                  <div class="right_title">
                     <img src="@/assets/images/login_bg2.png" style="width:40px;height:40px;" />
                     <div style="fong-size:14px;padding-left:20px;"> 蜂盈优品后台管理系统</div>
                  </div>
                  <div class="list">
                      <input v-model="user.account" placeholder="请输入账号" />
                  </div>
                  <div class="list">
                      <input v-model="user.password" placeholder="登录密码" />
                  </div>
                  <div class="list">
                      <input v-model="user.smscode" placeholder="手机验证码" />
                      <button class="code_but" @click="getCode()" :disabled="disabled">{{ codeText }}</button>
                  </div>
                  <!-- <div class="wjmm">忘记密码</div> -->
                  <div class="button" @click="doLogin">登录</div>
               </div>
          </div>
       </div>
     
  </div>
</template>

<script>

export default {
  name: 'login',
  data () {
    return {
        user:{
          account:'',
          password:'',
          smscode:'',
        },
        my_token:'',
        codeText:'获取验证码',
        totalTime:60,
        disabled:false,
        url:'',
    }
  },
   components:{

  },
  created(){
   
    
  },
  mounted (){
    
  },
  methods: {
 
    getCode(){
       let than =this
       
       this.post("account/isExist", {  //判断是否有此用户
					account:this.user.account,
        }).then(res => {
          
             if(res.error_code == 0){
                
               if(res.result == false){
                    this.open1('用户不存在','warning')   
               }else if(res.result == true){
                    than.disabled = true
                    this.post("/account/getSmsCodeForLogin", {
                        account:this.user.account,
                      }).then(res => {
                        // console.log(res) 
                          this.open1('发送成功','success')   
                          than.disabled = true
                          var codeText = this.codeText
                          var clock = setInterval(function() {
                            than.totalTime--
                            than.codeText = than.totalTime + 's'
                            if (than.totalTime == 1) {
                              clearInterval(clock);
                              than.codeText = codeText
                              than.totalTime = 60
                              than.disabled = false
                            }
                          }, 1000)

                      })

               }
              

              }else{
                this.open1(res.message,'warning')   
              }

        })
           
            

  },

 doLogin(){

  
      this.post("/account/login", {
					account:this.user.account,
          password:this.user.password,
          smscode:this.user.smscode
		 }).then(res => {
           console.log(res) 
          if(res.error_code == 0){
               
             this.my_token = res.result.token
            //  localStorage.setItem('my_token_fen',this.my_token)
             sessionStorage.setItem("session_token",this.my_token)
             

             this.$store.commit('up_my_username',res.result.info.username)  //用户名称
             this.$store.commit('up_px',res.result.info.power)  //左侧导航  
             this.$store.commit('up_static',res.result.info.identity)  //等级
             this.$store.commit('up_phone',res.result.info.telphone)  //等级
             this.$store.commit('up_super',res.result.info.super) //是否出现权限的列表栏
             
             //this.$router.push('/index')

             if(res.result.info.super == 1){
                 this.$router.push('/index/jurisdictionall')
             }else{
                  this.post("/cate/listOfData", {  //进入时默认第一项
                  }).then(res => {
                    this.select_arr = this.$store.state.my_pxarr.split(',')
                    console.log(this.select_arr )
                    for(let item of res.result) {
                          for(let a of item.list) {
                          if( this.select_arr.indexOf(a.cid.toString()) != -1){
                                  this.url = a.link
                                  this.$router.push(this.url)
                                  return false
                              }
                      
                          }
                      }
                  }) 
             }

             
            
             
            

             this.open1('登录成功','success')  //提示框

          }else{
             this.open1(res.message,'warning')   
          }
         
    })

      
       
    }
  }
}
</script>


<style scoped>
button:focus{outline:0;} 
#login{
  width: 100%;
  height: 100%;
}

.box{
   height: 100%;
   display: flex;  
   background: linear-gradient(90deg, #F4F5F9, #DDE5F8);
}
.box_left{
   flex: 1;
   display: flex;
   height: 100%;
   align-items: center;
}
.imgbg{
   width: 580px;
   height: 690px;
}
.box_right{
   /* flex: 1; */
   display: flex;
   padding-right:300px;
   height: 100%;
   align-items: center;
   justify-content: center;
   position: relative;
}
.con1{
  /* padding:30px 30px 50px 30px; */
  /* width: 32%; */
  padding:30px;
  width: 310px;
  height: 410px;
  background: #FFFFFF;
  border: 2px solid #FFFFFF;
  box-shadow: 0px 4px 20px 0px rgba(114, 147, 225, 0.2);
  border-radius: 6px;
  position: relative;
  z-index: 3;

}
.right_title{  
  font-size: 16px;
  font-weight: bold;
  color: #333333;
  display: flex;
    align-items: center;
}
.list{
  height:50px;
    width: 100%;
    display: flex;
    margin-top: 30px;
}
.list>input{
  flex: 1;
  height: 100%;
  background: #F6F4F5;
  border-radius: 10px;
  border: none;
  padding:0px 15px;
  color:#999999;
  font-size: 14px;
  font-weight: bold;
}
input:focus{border: none;outline:none;}
.code_but{
  height: 47px;
  width: 100px;
  line-height: 47px;
  border-radius: 5px;
  margin-left: 10px;
  /* background: linear-gradient(90deg,  #F5CF49, #F3C066); */
  background: #333333;
  /* box-shadow: 0px 4px 6px 0px rgba(246, 189, 34, 0.2); */
  color:white;
  font-size: 14px;
  text-align: center;
  border:none;
}
.button{
  width: 100%;
  height: 50px;
  background: linear-gradient(90deg, #F5CF49, #F3C066);
  box-shadow: 0px 18px 17px 0px rgba(246, 189, 34, 0.2);
  border-radius: 2px;
  margin: auto;
  color:white;
  font-size: 14px;
  text-align: center;
  line-height: 50px;
  border-radius: 50px;
  margin-top: 50px;
}
.jb_img{
  position: absolute;
    bottom: -34px;
    left: -33px;
}
.jb_img1{
  position: absolute;
    top: -34px;
    right: -33px;
}
</style>
